<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="utf-8">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      width: 99%;
      font-size: 22px;
      overflow: hidden;
      margin: 0 auto;
    }

    #vue-wrap {
      overflow: hidden
    }

    .title {
      padding: 15px 10px 20px 0;
      font-size: 36px;
      position: relative;
      text-align: center;
      border-bottom: 1px solid #ddd;
      font-weight: bold;
    }

    .title .no {
      font-size: 24px;
      position: absolute;
      bottom: 20px;
      right: 10px;
      font-weight: normal;
    }

    .content {
      display: flex;
    }

    .left {
      width: 550px;
      position: relative;
    }

    .left img {
      width: 100%;
      height: 550px;
    }

    .code-name {
      padding: 10px 30px 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: bold;
    }

    .right {
      flex: 1;
      padding-top: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .right .block {
      padding: 0 0 0 15px;
      display: flex;
      align-items: center;
    }

    .block .label {
      font-weight: bold;
      min-width: 110px;
    }

    .label-right {
      flex: 1;
      border-bottom: 1px solid #ddd;
      padding: 2px 10px;
      min-height: 26px;
    }

    .long-remark {
      display: flex;
      align-items: center;
      margin-left: 10px;
    }

    .marked {
      font-weight: bold;
      color: red;
      font-size: 22px;
    }

    .cl-red {
      color: red;
    }
  </style>
</head>

<body>
  <div id="vue-wrap" v-if="data.brand_name">
    <div class="title">{{data.brand_name}}订购单<div class="no" v-if="data.order_no">NO: {{data.order_no.slice(-8)}}</div>
    </div>
    <div class="content">
      <div class="left" v-if="goods.images">
        <img :src="goods.images[0]" />
      </div>
      <div class="right" v-if="data.subscriber" id="index">

        <div class="block">
          <div class="label">取货时间：</div>
          <div class="label-right marked">{{data.delivery_time}}</div>
        </div>

        <div class="block">
          <div class="label">取货方式：</div>

          <div class="label-right">{{get_way}}</div>
        </div>

        <template v-if="get_way == '配送'">
          <div class="block">
            <div class="label">配送门店：</div>
            <div class="label-right">
              {{data.store.store_name}} （{{data.store.store_phone}}）
            </div>
          </div>

          <div class="block">
            <div class="label">配送地址：</div>
            <div class="label-right">{{data.delivery_address || ' '}}</div>
          </div>
        </template>

        <div class="block" v-else>
          <div class="label">自提门店：</div>
          <div class="label-right">
            {{data.store.store_name}} （{{data.store.store_phone}}）
          </div>
        </div>

        <div class="block">
          <div class="label">订购人：</div>

          <div class="label-right">{{data.subscriber}}（{{data.contact.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}）
          </div>
        </div>
        <div class="block">
          <div class="label">尺寸：</div>
          <div class="label-right">{{data.size}}</div>
        </div>

        <div class="block">
          <div class="label">收款金额：</div>
          <div class="label-right"><span>{{data.amount || ''}} {{data.amount?'元': ''}}</span></div>
        </div>

        <div class="block">
          <div class="label">支付方式：</div>

          <div class="label-right">{{data.payment_name || ''}}</div>
        </div>

        <template v-if="customForm.length">
          <div class="block" v-if='customForm[0].swi'>
            <div class="label">{{customForm[0].name}}：</div>

            <div class="label-right">{{data.custom1}}</div>
          </div>
          <div class="block" v-if='customForm[1].swi'>
            <div class="label">{{customForm[1].name}}：</div>

            <div class="label-right">{{data.custom2}}</div>
          </div>
          <div class="block" v-if='customForm[2].swi'>
            <div class="label">{{customForm[2].name}}：</div>

            <div class="label-right">{{data.custom3}}</div>
          </div>
        </template>

        <div class="block">
          <div class="label">订购时间：</div>

          <div class="label-right">{{data.created_at}}</div>
        </div>

        <div class="block">
          <div class="label">备注：</div>

          <div class="label-right cl-red">{{data.remark}}</div>
        </div>

      </div>
    </div>
    <div class="code-name">
      <div>名称：{{goods.name}}</div>
      <div>下单门店：{{data.order_store_name}}</div>
      <div>制单人：{{data.voucher}}</div>
      <div>收银员：{{data.cashier}}</div>
      <div>制作师：{{data.making}}</div>
    </div>
  </div>
</body>
<script src="http://image.cake.kelaike.net/public/js/vue.js"></script>
<script src="http://image.cake.kelaike.net/public/js/axios.min.js"></script>
<script>
  new Vue({
    el: '#vue-wrap',
    data() {
      return {
        get_way: '',
        data: {},
        goods: {},
        customForm: []
      }
    },
    created() {
      let url = location.href
      // let url = 'http://screen.i-services.cn/cake.html?order_no=20210711429162&shop_id=1'
      console.log('url:', url)

      const order_no = url.split('&')[0].split('=')[1]
      // const shopid = url.split('&')[1].split('=')[1]


      axios.post('http://cake.kelaike.net/api/screen/order/info',
        // axios.post('http://cake.i-services.cn/api/screen/order/info',
        { order_no },
        {
          headers: {
            'content-type': 'application/json',
            // shopid
          }
        }
      ).then(res => {
        console.log('res.data:', res.data)
        let d = res.data.data

        this.data = d || {}
        this.goods = d.goods[0] || {}
        let tab = d.custom_form.tableData
        this.customForm = (tab && tab.length) ? tab : []
        this.get_way = d.delivery_type == 'oneself' ? '自提' : '配送'
      })
    }
  })
</script>

</html>